<template>
  <div>
    <div>
      <n-collapse>
        <n-collapse-item title="编辑信息" name="1">
          <div>
            <el-button
                type="danger"
                @click="deleteDeviceInfoBtn"
                style="color: #ffffff;margin-bottom: 30px;"
                round
                size="small"
            >
              删除
              <el-icon style="margin: 0 10px">
                <Delete/>
              </el-icon>
            </el-button>
            <el-button
                @click="saveDeviceInfoBtn"
                style="color: #545c64;margin-bottom: 30px;"
                round
                size="small"
            >
              保存
              <el-icon style="margin: 0 10px">
                <Edit/>
              </el-icon>
            </el-button>
            <el-form :inline="true" :model="DeviceInfo" class="demo-form-inline" size="small">
              <el-form-item label="名称">
                <el-input v-model="DeviceInfo.DeviceName" maxlength="35" placeholder="请输入设备名称"></el-input>
              </el-form-item>
              <el-form-item label="IP">
                <el-input v-model="DeviceInfo.Ip" maxlength="20" placeholder="请输入设备IP"></el-input>
              </el-form-item>
              <el-form-item label="端口">
                <el-input v-model="DeviceInfo.Port" type="Number" placeholder="请输入设备端口"></el-input>
              </el-form-item>
              <el-form-item label="机架号">
                <el-input v-model="DeviceInfo.Rack" type="Number" placeholder="请输入设备机架号"></el-input>
              </el-form-item>
              <el-form-item label="槽号">
                <el-input v-model="DeviceInfo.Slot" type="Number" placeholder="请输入设备槽号"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </n-collapse-item>
      </n-collapse>
      <div>
        <div style="display: flex;justify-content: end;margin-bottom: 10px">
          <el-button
              @click="addPlcAddressBtn(null)"
              round
              style="color: #545c64;margin-bottom: 30px;"
              size="small">
            添加地址
            <el-icon style="margin: 0 10px">
              <Plus/>
            </el-icon>
          </el-button>
          <el-button @click="SynchronizationData" round style="color: #545c64;margin-bottom: 30px;" size="small">
            同步数据
          </el-button>
        </div>
        <el-table
            :data="PlcAddressList"
            :height="400"
            style="width: 100%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
        >
          <el-table-column
              prop="Name"
              label="名称"
          ></el-table-column>
          <el-table-column
              prop="Address"
              label="地址"
          >
          </el-table-column>
          <el-table-column
              prop="Value1"
              label="数据"
          >
          </el-table-column>
          <el-table-column
              prop="Desc"
              label="描述"
          >
          </el-table-column>
          <el-table-column
              fixed="right"
              prop="operation"
              label="操作"
              width="180"
          >
            <template #default="scope">
              <el-button
                  @click="deleteAddress(scope.row,scope.$index)" type="text" size="small" style="color: red">
                删除
              </el-button>
              <el-button
                  @click="editAddress(scope.row)" type="text" size="small">编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--    </el-dialog>-->
    <add-plc-drive-address-dialog
        :address="currentSelectAddress"
        :driveInfo="DeviceInfo"
        :show="showAddPlcDriveAddressDialog"
        @close="onCloseAddPlcDriveAddressDialog"
        @confirm="onConfirm"
    ></add-plc-drive-address-dialog>
  </div>
</template>
<script>
import AddPlcDriveAddressDialog from './AddAddressDialog.vue'
import SysDriveApi from '@/api/flow/SysDriveApi'
import Utils from '../../../utils/Common'
import { MessageSuccess, MessageWarning } from "@/utils";
import { Device } from "@/api/DeviceApi";
import { useFlowStore } from "@/store/modules/flow/flowStore";

export default {
  name: 'EditDriveDialog',
  components: { AddPlcDriveAddressDialog },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    drive: {
      type: Object,
      deep: true,
      immediate: true
    }
  },
  watch: {
    show (v) {
      if (v) {
        this._Show(v)
      }
    }
  },
  data () {
    return {
      showAddPlcDriveAddressDialog: false,
      EditDriveDialogVisible: false,
      currentSelectAddress: null,
      DeviceInfo: {
        Id: 0,
        DeviceType: null,
        DeviceName: '',
        Ip: null,
        Port: null,
        Rack: null,
        Slot: null
      },
      PlcAddressList: []
    }
  },
  methods: {
    _Show (Device) {
      this.DeviceInfo = Device
      this.showDriveAddressList()
    },
    /**
     * 删除地址
     * @param row
     * @param index
     */
    deleteAddress (row, index) {
      this.$confirm(`是否删除地址${row.Address}？`, `确认删除${row.Name}`, {
        distinguishCancelAndClose: true,
        roundButton: true,
        confirmButtonClass: 'delete-plc-address-btn',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        Device.DeleteAddress(row.Id).then(res => {
          if (res.IsSuccess) {
            this.PlcAddressList.splice(index, 1)
            window.$message.success('删除成功！')
            const FlowStore = useFlowStore()
            FlowStore.UpdatePlcAddress()
          }
        })
      })
    },
    onConfirm (plcAddress) {
      this.showDriveAddressList()
    },
    editAddress (row) {
      this.addPlcAddressBtn(row)
    },
    /**
     * 新增地址
     */
    addPlcAddressBtn (row = null) {
      this.currentSelectAddress = row
      if (Utils.IsEmpty(this.DeviceInfo.Id) || this.DeviceInfo.Id <= 0) {
        return MessageWarning('请先添加设备信息')
      }
      this.showAddPlcDriveAddressDialog = true
    },
    SynchronizationData () {
      Device.SynchronizationData('PLC', this.DeviceInfo.Id).then(res => {
        this.PlcAddressList = res.Data
        MessageSuccess('数据同步完成')
      })
    },
    saveDeviceInfoBtn () {
      const di = this.DeviceInfo
      if (!this.verificationDeviceInfo(di)) {
        return
      }
      new SysDriveApi().AddDrive(di, (data) => {
        this.DeviceInfo = data
        this.$emit('refresh')
      })
      this.$message({
        type: 'success',
        message: this.DeviceInfo.DeviceName + ' 保存成功'
      })
    },
    verificationDeviceInfo (di) {
      let mes = ''
      let ve = true
      if (ve && Utils.IsEmpty(di.DeviceName)) {
        ve = false
        mes = '设备名称不能为空'
      }
      if (ve && Utils.IsEmpty(di.Ip)) {
        ve = false
        mes = '设备Ip不能为空'
      }
      if (ve && Utils.IsEmpty(di.Port)) {
        ve = false
        mes = '设备端口不能为空'
      }
      if (!ve) {
        MessageWarning(mes)
      }
      return ve
    },
    /**
     * 删除设备
     */
    deleteDeviceInfoBtn () {
      this.$confirm(`是否删除设备${this.DeviceInfo.DeviceName}？`, `确认删除设备`, {
        distinguishCancelAndClose: true,
        roundButton: true,
        confirmButtonClass: 'el-button--warning',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        Device.Delete(this.DeviceInfo.Id).then((de) => {
          if (de.IsSuccess) {
            // this.$emit('deleteDrive')
            this.handleCloseEditDriveDialog()
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }
        })
      })
    },
    /**
     * 显示设备下的地址列表信息
     */
    showDriveAddressList () {
      if (Utils.IsEmpty(this.DeviceInfo.Id)) {
        this.PlcAddressList = []
        return
      }
      Device.GetPlcAddressByDriverId(this.DeviceInfo.Id).then(res => {
        this.PlcAddressList = res.Data
      })
    },
    /**
     * 关闭窗口
     */
    handleCloseEditDriveDialog () {
      this.EditDriveDialogVisible = false
      this.DeviceInfo = {}
      this.$emit('close')
    },
    onCloseAddPlcDriveAddressDialog () {
      this.showAddPlcDriveAddressDialog = false
    }
  },
  beforeUnmount () {
  }
}
</script>

<style lang="less">
.edit-drive-dialog {

}

.delete-plc-address-btn {
  //background-color: red;
}
</style>
